<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全选框</title>
    <style>
        *{padding: 0; margin: 0;}
        ul li{list-style: none;}
        a{text-decoration: none; color: #706e6e;}
        .container{width: 80%; margin: 5px auto;}
        .m-table,th,td{border: 1px solid #cecece; border-collapse: collapse; }
        .m-table caption{font-size: 18px; font-weight: bold;}
        .m-table tr{line-height: 40px;}
        .m-table tr:hover{background-color: #eeeaea;}
        .m-table th{width: 200px; background-color: goldenrod; color: white; text-align: center; }
        .m-table td{text-align: center; }
 
    </style>
</head>
 
<body>
    <div class="container">
        <table class="m-table">
            <caption>员工信息列表</caption>
            <tbody>
                <tr>
                    <th><input type="checkbox" class="checkbox-all">全选</th>
                    <th>员工编号</th>
                    <th>员工名称</th>
                    <th>员工部门</th>
                    <th colspan="2">操作</th>
                </tr>
                <tr>
                    <td> <input type="checkbox" class="checkbox-item" ></td>
                    <td>1001</td>
                    <td>张三</td>
                    <td>技术部</td>
                    <td><a href="#">删除</a> </td>
                    <td><a href="#">编辑</a></td>
                </tr>
                <tr>
                    <td> <input type="checkbox"  class="checkbox-item" ></td>
                    <td>1002</td>
                    <td>李四</td>
                    <td>技术部</td>
                    <td><a href="#">删除</a> </td>
                    <td><a href="#">编辑</a></td>
                </tr>
                <tr>
                    <td> <input type="checkbox"  class="checkbox-item" ></td>
                    <td>1003</td>
                    <td>王二</td>
                    <td>技术部</td>
                    <td><a href="#">删除</a> </td>
                    <td><a href="#">编辑</a></td>
                </tr>
      
            </tbody>
        </table>
    </div>






    <script>
        var tmp=0
        let inputs=document.querySelectorAll('.checkbox-item')//选择
        let inputall=document.querySelector('.checkbox-all')//全选
        inputall.onclick=function(){
           // console.log(inputall.checked);
            if(inputall.checked==true){
               for(let i=0;i<inputs.length;i++){
               inputs[i].checked=true
               }
        }
        if(inputall.checked==false){
               for(let i=0;i<inputs.length;i++){
                   tmp=0;
                console.log(tmp)
                inputs[i].checked=false
               }
        }
    }
    function isall(){
    for(let j=0;j<inputs.length;j++){
        inputs[j].onclick=function(){
            if(inputs[j].checked==true){
                tmp++;
                if(tmp==inputs.length){
                inputall.checked=true
               }
               console.log(tmp)
            }
            if(inputs[j].checked==false){
               tmp--
            if(tmp!=inputs.length){
                inputall.checked=false
            }
            console.log(tmp)
            }

               }

            } 

        } 
        
    
    
    
    isall()
   
   

    </script>
</body>
 
</html>
